<style type="text/css">
    .script_item {
        margin-bottom: 25px;
        cursor: default;
        transition: 0.5s;
    }

    .script_item:hover {
        transform: scale(1.05);
    }
</style>
<div id="script_list"></div>

<script src="https://res.dcdev.net/dcdev/v1.0.8/assets/js/render_somthing.js"></script>

<script>
    // 记录是否首次改变样式及状态，如果是则undo之后再执行样式修改
    var script_list;
    script_list = new render_somthing();
    script_list.init({
        // div的id
        id: "#script_list",
        // x/y/flow   分别为x向滚动、y向滚动、瀑布流
        method: "y",
        // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
        container: {
            html: `
<div style="margin-left:10px;margin-top:60px;"></div>
`
        },
        // 渲染内容的配置
        content: {
            default: `
<div class="script_item" data-key="type" style="">
    <div style="font-size:15px;">#{type}</div>
    <div style="color:gray;font-size:12px;">#{desc}</div>
</div>
`,
        },
        callback: {
            click: function (res) {
                if (res.key == "type") {
                    var content;
                    content = get_selected_content();
                    switch (res.value.type) {
                        case "全屏灰色":
                            insert_to_editor(
                                `<!-- ${res.value.desc} -->\n<style>	body {		-webkit-filter: grayscale(100%);		/* webkit */		-moz-filter: grayscale(100%);		/*firefox*/		-ms-filter: grayscale(100%);		/*ie9*/		-o-filter: grayscale(100%);		/*opera*/		filter: grayscale(100%);		filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);		/*ie*/		filter: gray;		/*ie9- */	}</style>\n\n`
                            )
                            break;
                        case "ajax请求":
                            var temp = `
// ${res.value.type}
// 请求地址
var url = "";
// 请求数据
var data = {};
$.ajax({
    method: "post",
    dataType: "json",
    url: url,
    data: {
        params: JSON.stringify(data)
    },
    success: function (res) {
        // 请求成功处理
        if (res["res"]) {

        }
        // 请求失败处理
        else {

        }
    }
})
`
                            insert_to_editor(temp);
                            break;
                        case "屏蔽横屏":
                            var temp = `
<!--  ${res.value.type} -->
<script>
	if (browser_info.is_mobile) {
      loadJs("https://res.dcdev.net/dcdev/v1.0.8/assets/js/reject_lanscape.js",
        function () {});
    }
<\/script>
`
                            insert_to_editor(temp);
                            break;
                        case "微信分享":
                            //页面层
                            layer.open({
                                zIndex: 9998,
                                //shade: 0,
                                title: '微信分享配置',
                                type: 1,
                                skin: 'layui-layer-rim', //加上边框
                                area: ['650px', '613px'], //宽高
                                content: $('#wx_share_popup')
                            });
                            //选择图片按钮
                            $("#edit_share_img").click(
                                function () {
                                    get_editor_image_url(function (res) {
                                        $("#edit_share_img").attr("src", res);
                                        $("#show_share_img_2").attr("src", res);
                                        $("#show_share_img").attr("src", res);
                                    })
                                }
                            )
                            //绑定标题
                            $("#edit_share_title_moment").bind("input propertychange", function () {
                                console.log($(this).val());
                                $("#show_share_title_moment").html($("#edit_share_title_moment")
                                    .val())
                            });
                            //绑定标题
                            $("#edit_share_title_friend").bind("input propertychange", function () {
                                console.log($(this).val());
                                $("#show_share_title_friend").html($("#edit_share_title_friend")
                                    .val())
                            });
                            //绑定输入描述
                            $("#edit_share_tag").bind("input propertychange", function () {
                                console.log($(this).val());
                                $("#show_share_tag").html($("#edit_share_tag").val())
                            });

                            //完成按钮
                            $("#edit_share_btn").click(
                                function () {
                                    //判断是否选择固定地址
                                    var link = ""
                                    if (window['link_choose'].value == '固定地址') {
                                        link = $("#edit_share_moment_link").val()
                                    }
                                    var temp = `
<!--  ${res.value.type} start -->
<script>
    if (browser_info.is_wechat) {
    /* 
        1.设置页面缩小成悬浮按钮时只能使用微信公众号图标，不能使用自定义图片
        2.设置分享到会话及朋友圈的图标、文案及url（会话及朋友圈方案地址均或独立配置）
            title: "",      // 分享标题
            desc: "",       // 分享描述（分享到朋友圈不使用desc）
            link: "",       // 如果是原链接分享，可为空
            imgUrl: "",     // 不设置头像则使用当前用户头像
    */
    loadJs(
      "https://res.dcdev.net/dcdev/v1.0.8/assets/js/share_to_wx.js"
    )

    function wxShareReady(res) {
      if (res.res) {
        var url = \`$\{location.href.split("?")[0]\}\`;
        var data = {
                    // 分享到朋友圈时的文案
                    momentShareData: {
                        title: \`${$('#edit_share_title_moment').val()}\`,
                        link: \`${link}\`,
                        imgUrl: \`${$('#edit_share_img').attr("src")}\`,
                    },
                    // 分享到会话时的文案
                    friendShareData: {
                        title: \`${$('#edit_share_title_friend').val()}\`,
                        desc: \`${$('#edit_share_tag').val()}\`,
                        link: \`${link}\`,
                        imgUrl: \`${$('#edit_share_img').attr("src")}\`,
                    }
        }

        setShareData(data, function (res) {
          console.log(JSON.string(res));
        });
      }
    }
  }
<\/script>
<!--  ${res.value.type} end -->
`
                                    insert_to_editor(temp);
                                    layer.closeAll();
                                }
                            )
                            break;
                        case "获取手机型号":
                            var temp = `
<!--  ${res.value.type} start -->

<style>
#_a5ffaa4b0{
	color:red;
font-size:16px;
}
</style>
<div id="_a5ffaa4b0"></div>
<div>XX杀毒，您值得下载。</div>
<script src="https://cdn.bootcdn.net/ajax/libs/mobile-detect/1.4.4/mobile-detect.min.js"><\/script>
<script> 
function getDeviceInfo(){
  //判断数组中是否包含某字符串 
  Array.prototype.contains = function(needle) { 
    for (i in this) { 
      if (this[i].indexOf(needle) > 0) 
        return i; 
    } 
    return -1; 
  } 
  var device_type = navigator.userAgent;//获取userAgent信息 
  var md = new MobileDetect(device_type);//初始化mobile-detect 
  var os = md.os();//获取系统 
  var model = ""; 
  if (os == "iOS") {//ios系统的处理 
    os = md.os() + md.version("iPhone"); 
    model = md.mobile(); 
  } else if (os == "AndroidOS") {//Android系统的处理 
    os = md.os() + md.version("Android"); 
    var sss = device_type.split(";"); 
    var i = sss.contains("Build/"); 
    if (i > -1) { 
      model = sss[i].substring(0, sss[i].indexOf("Build/")); 
    } 
  } 
  return {'os':os,'model':model}
}
//获取手机型号例子
//建议在手机预览测试，电脑显示null 
$("#_a5ffaa4b0").html("您的"+getDeviceInfo().model+"手机易中毒，请速度安装XX杀毒软件进行扫描！！！")
<\/script> 
<!--  ${res.value.type} end -->
`
                            insert_to_editor(temp);
                        default:
                            break;
                    }

                }
            }
        },
    });
    var data = [{
            type: "屏蔽横屏",
            desc: "移动设备旋转时将显示提示."
        },
        {
            type: "微信分享",
            desc: "自定义微信分享内容（需配置相关公众号，暂时为数控开发平台可用）."
        },
        {
            type: "获取手机型号",
            desc: "可以获取出用户的手机型号。"
        },
        {
            type: "成功提示",
            desc: "自动关闭的成功提示."
        },
        {
            type: "错误提示",
            desc: "自动关闭的错误提示."
        },
        {
            type: "ajax请求",
            desc: ""
        },
        {
            type: "全屏灰色",
            desc: "使整个页面变成灰色"
        },
    ]
    script_list.render(data);
</script>